<template>
    <div class="list" ref="wapp">
      <div>
        <div class="area">
           <div class="title">当前城市</div>
           <ul class="btn_list">
             <li><div>{{this.$store.state.city}}</div></li>
           </ul>
        </div>
      <div class="area" >
        <div class="title">热门城市</div>
        <ul class="btn_list">
          <li
            v-for="item in hotCity"
            :key="item.id"
            @click="cityClick(item.name)"
          ><div>{{item.name}}</div></li>
        </ul>
      </div>
      <div class="area"
           v-for="(item,key) in cities"
           :key="key"
           :ref="key"
      >
        <div class="title">{{key}}</div>
          <ul class="list-cs">
            <li
              v-for="city in item"
              :key="city.id"
              @click="cityClick(city.name)">{{city.name}}</li>
          </ul>
      </div>
      </div>
    </div>
</template>

<script>
  //引入better-scoll
  import Bscroll from 'better-scroll'
    export default {
        name: "List",
      props:{
        hotCity:Array,
        cities:Object,
        letter:String//接受要传递的字母  实现跳转
      },
      methods:{
        cityClick(city){
          this.$store.dispatch("changeCity",city)
          this.$router.push('/')
          // alert(city)
        }
      },
      mounted(){
          this.scroll=new Bscroll(this.$refs.wapp)
      },
      watch:{
          letter(){
            if (this.letter){
              const element =this.$refs[this.letter][0]
              this.scroll.scrollToElement(element)
            }
           // console.log(this.letter)
          }
      }
    }
</script>

<style lang="stylus" scoped>
   .list
     overflow hidden;
     position absolute;
     top .76rem;
     left 0;
     bottom 0;
     right 0;
     .area{
     .title{
       width 100%;
       line-height .3rem;
       background #eee;
       padding-left .1rem;
       border-bottom 1px solid #ddd;
       color #666;
     }
     .btn_list{
       overflow hidden;
       padding .05rem .3rem .05rem .05rem;
       box-sizing border-box;
       li{
         width 33.33%;
         float left;
         div{
           text-align center;
           margin .05rem;
           border-radius .03rem;
           border 1px solid #666;
           padding .05rem 0;
         }
       }
     }
     .list-cs{
       li{
         border-bottom 1px solid #ddd;
         padding-left .10rem;
         line-height .35rem;
         font-size 14px;
         color #666;
       }
     }
   }
</style>
